<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by huynx</title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
  <style type="text/css">
    .section {background-color:gray; height:440px; margin-bottom:20px;}

.navigation {position:fixed; right:50px; top:10px;}
  </style>
  


<script type="text/javascript">
$(window).load(function(){
$('div.section').first();

$('a.display').on('click', function(e) {
	
    e.preventDefault();

      var t = $(this).text(),
      that = $(this);
alert(t);
    if (t === 'next' && $('.current').next('div.section').length > 0) {
        var $next = $('.current').next('.section');
        var top = $next.offset().top;
        
        $('.current').removeClass('current');
      
        $('body').animate({
          scrollTop: top     
        }, function () {
               $next.addClass('current');
        });
  } else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
        var $prev = $('.current').prev('.section');
        var top = $prev.offset().top;
        
        $('.current').removeClass('current');
      
        $('body').animate({
          scrollTop: top     
        }, function () {
               $prev.addClass('current');
        });
  } 
});

});

</script>


</head>
<body>
  <div class="main">
<div class="navigation">
    <a href="#" id="display" class="display">next</a><br>
    <a href="#" id="display1" class="display">prev</a>
</div>
<div id="one" class="section">
One
</div>
<div id="two" class="section">
Two
</div>
<div id="three" class="section">
Three
</div>
<div id="four" class="section current">
Four
</div>
</div>
  





</body></html>